<template>
  <div class="home-service">
    <h1 class="section-title">服务预约与匹配</h1>
    <div class="service-list">
      <!-- 家政服务模块 -->
      <div class="main-service-item">
        <h2 class="service-category">家政服务</h2>
        <div class="sub-service-list">
          <div 
            v-for="service in homeServices" 
            :key="service.id" 
            class="sub-service-item"
            @mouseenter="scaleUp(service.id)"
            @mouseleave="scaleDown(service.id)"
            :style="{ transform: `scale(${service.scale})` }"
          >
            <h3 class="service-name">{{ service.name }}</h3>
            <p class="service-desc">{{ service.description }}</p>
            <button @click="openDialog(service)" class="order-button">立即预约</button>
          </div>
        </div>
      </div>
      <!-- 医疗健康模块 -->
      <div class="main-service-item">
        <h2 class="service-category">医疗健康</h2>
        <div class="sub-service-list">
          <div 
            v-for="service in medicalServices" 
            :key="service.id" 
            class="sub-service-item"
            @mouseenter="scaleUp(service.id)"
            @mouseleave="scaleDown(service.id)"
            :style="{ transform: `scale(${service.scale})` }"
          >
            <h3 class="service-name">{{ service.name }}</h3>
            <p class="service-desc">{{ service.description }}</p>
            <button @click="openDialog(service)" class="order-button">立即预约</button>
          </div>
        </div>
      </div>
      <!-- 日间照料模块 -->
      <div class="main-service-item">
        <h2 class="service-category">日间照料</h2>
        <div class="sub-service-list">
          <div 
            v-for="service in careServices" 
            :key="service.id" 
            class="sub-service-item"
            @mouseenter="scaleUp(service.id)"
            @mouseleave="scaleDown(service.id)"
            :style="{ transform: `scale(${service.scale})` }"
          >
            <h3 class="service-name">{{ service.name }}</h3>
            <p class="service-desc">{{ service.description }}</p>
            <button @click="openDialog(service)" class="order-button">立即预约</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 预约弹窗 -->
    <appointment-dialog
      :show="showDialog"
      :type="currentService.type"
      :title="dialogTitle"
      @close="closeDialog"
      @submit="handleAppointmentSubmit"
    />
  </div>
</template>

<script>
import AppointmentDialog from '@/components/AppointmentDialog.vue';

export default {
  components: {
    AppointmentDialog
  },
  data() {
    return {
      showDialog: false,
      currentService: {},
      homeServices: [
        { 
          id: 1, 
          name: '保洁', 
          description: '专业的家庭保洁服务', 
          scale: 1,
          type: 'cleaning'
        },
        { 
          id: 2, 
          name: '送餐', 
          description: '新鲜健康的餐食配送', 
          scale: 1,
          type: 'meal'
        },
        { 
          id: 3, 
          name: '代购', 
          description: '帮忙代购各类生活用品', 
          scale: 1,
          type: 'shopping'
        },
      ],
      medicalServices: [
        { 
          id: 4, 
          name: '家庭医生签约', 
          description: '专业家庭医生签约服务', 
          scale: 1,
          type: 'doctor'
        },
        { 
          id: 5, 
          name: '上门护理预约', 
          description: '专业护士上门护理服务', 
          scale: 1,
          type: 'nursing'
        },
        { 
          id: 6, 
          name: '药品配送', 
          description: '及时安全的药品配送服务', 
          scale: 1,
          type: 'medicine'
        },
      ],
      careServices: [
        { 
          id: 7, 
          name: '床位实时查询', 
          description: '实时查询社区中心床位信息', 
          scale: 1,
          type: 'bed'
        },
        { 
          id: 8, 
          name: '床位预约', 
          description: '便捷的社区中心床位预约服务', 
          scale: 1,
          type: 'bed-booking'
        },
        { 
          id: 9, 
          name: '费用结算', 
          description: '透明的日间照料费用结算服务', 
          scale: 1,
          type: 'payment'
        },
      ],
    };
  },
  computed: {
    dialogTitle() {
      return `${this.currentService.name}服务预约`;
    }
  },
  methods: {
    openDialog(service) {
      this.currentService = service;
      this.showDialog = true;
    },
    closeDialog() {
      this.showDialog = false;
      this.currentService = {};
    },
    handleAppointmentSubmit(appointmentData) {
      console.log('预约信息：', appointmentData);
      
      // 创建预约记录
      const appointment = {
        id: Date.now(),
        serviceName: this.currentService.name,
        serviceType: this.getServiceType(this.currentService.type),
        date: appointmentData.date,
        time: appointmentData.time,
        location: '上门服务',
        status: 'upcoming',
        duration: appointmentData.duration || '1次',
        requirements: appointmentData.requirements || appointmentData.note || '',
        type: this.currentService.type,
        ...appointmentData
      };
      
      // 保存到本地存储
      const existingAppointments = JSON.parse(localStorage.getItem('appointments') || '[]');
      existingAppointments.push(appointment);
      localStorage.setItem('appointments', JSON.stringify(existingAppointments));
      
      // 这里添加预约信息提交到后端的逻辑
      this.$api.placeOrder(appointmentData).then(() => {
        alert('预约成功！');
        this.closeDialog();
      }).catch(error => {
        alert('预约失败，请稍后重试');
        console.error('预约失败：', error);
      });
    },
    getServiceType(type) {
      const typeMap = {
        'cleaning': '家政服务',
        'meal': '送餐服务',
        'shopping': '家政服务',
        'doctor': '医疗健康',
        'nursing': '医疗健康',
        'medicine': '医疗健康',
        'bed': '日间照料',
        'bed-booking': '日间照料',
        'payment': '日间照料'
      };
      return typeMap[type] || '其他服务';
    },
    scaleUp(id) {
      const allServices = [...this.homeServices, ...this.medicalServices, ...this.careServices];
      const service = allServices.find(s => s.id === id);
      if (service) {
        service.scale = 1.05;
      }
    },
    scaleDown(id) {
      const allServices = [...this.homeServices, ...this.medicalServices, ...this.careServices];
      const service = allServices.find(s => s.id === id);
      if (service) {
        service.scale = 1;
      }
    }
  },
};
</script>

<style scoped>
.home-service {
  padding: 40px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.section-title {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 40px;
  text-align: center;
  font-weight: 600;
}

.service-category {
  font-size: 24px;
  color: #34495e;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e8eef3;
}

.main-service-item {
  background-color: white;
  padding: 30px;
  border-radius: 16px;
  margin-bottom: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.main-service-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.sub-service-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  justify-content: center;
}

.sub-service-item {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border: 1px solid #edf2f7;
  transition: all 0.3s ease;
}

.service-name {
  font-size: 20px;
  color: #2c3e50;
  margin: 0;
  font-weight: 500;
}

.service-desc {
  color: #64748b;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}

.order-button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: auto;
}

.order-button:hover {
  background-color: #3aa876;
  transform: translateY(-1px);
}

.order-button:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .home-service {
    padding: 20px;
  }

  .section-title {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .main-service-item {
    padding: 20px;
    margin-bottom: 30px;
  }

  .sub-service-item {
    padding: 20px;
  }

  .service-name {
    font-size: 18px;
  }

  .service-desc {
    font-size: 14px;
  }
}
</style>